<template>
  <div id="right" style="overflow-y:auto;">
    <el-page-header @back="$router.back()" content="杭州长安医院"></el-page-header>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="办卡统计" name="first">
        <el-table
          :data="data"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#fff',color:'#0099CC'}"
        >
          <el-table-column fixed prop="fatime" label="发卡时间" width="200" />

          <el-table-column prop="userName" label="姓名" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="papersNumber" label="身份证号" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="78"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <div class="right"></div>
      <el-tab-pane label="用卡统计" name="second">
        <el-table
          :data="data1"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#fff',color:'#0099CC'}"
        >
          <el-table-column fixed prop="fatime" label="用卡时间" width="200" />

          <el-table-column prop="userName" label="名字" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="papersNumber" label="身份证" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="210"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="总数据报表" name="third">
        <div class="bigClass">
          <div class="sum">
            <h3>总数据(截止目前)</h3>
          </div>
          <el-row :gutter="10" class="gmb">
            <el-col :span="6">
              <div class="box flex-row">
                <div class="icon-box">
                  <div class="icon-title">建卡数量</div>
                  <div class="icon-number">5426</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="box flex-row">
                <div class="icon-box">
                  <div class="icon-title">成人数量</div>
                  <div class="icon-number">4380</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="box flex-row">
                <div class="icon-box">
                  <div class="icon-title">儿童数量</div>
                  <div class="icon-number">1046</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="box flex-row">
                <div class="icon-box">
                  <div class="icon-title">男性</div>
                  <div class="icon-number">3130</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="box flex-row">
                <div class="icon-box">
                  <div class="icon-title">女性</div>
                  <div class="icon-number">2296</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="box gmb">
            <v-chart style="width:100%;height:300px" :options="renqun" autoresize />
          </div>
          <div class="box gmb">
            <v-chart style="width:100%;height:300px;" :options="menzhen" autoresize />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottom"></div>
  </div>
</template>
<script>
export default {
  name: "healthlist",
  data() {
    return {
      men: 0,
      women: 0,
      menzhen: {
        title: {
          text: "各时间段就诊人数",
          subtext: "按小时统计"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["最高就诊人数", "最低就诊人数"]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "0点-1点",
            "1点-2点",
            "2点-3点",
            "3点-4点",
            "4点-5点",
            "5点-6点",
            "6点-7点",
            "7点-8点"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 人"
          }
        },
        series: [
          {
            name: "就诊人数",
            type: "line",
            data: [5, 11, 15, 30, 80, 150, 130, 90],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      },
      renqun: {
        title: {
          text: "就诊人群年龄段分析",
          color: "#0099CC",
          subtext: "按小时统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          top: 60,
          left: 0,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            show: false
          },
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: "#000",
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: "#000",
            fontSize: 14
          },
          data: ["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61+"]
        },
        series: {
          name: "年龄段",
          barMinWidth: 10,
          type: "bar",
          itemStyle: {
            normal: {
              color: params => {
                let colors = [
                  "#96dee8",
                  "#3fb1e3",
                  "#96dee8",
                  "#3fb1e3",
                  "#96dee8",
                  "#3fb1e3",
                  "#96dee8"
                ];
                return colors[params.dataIndex];
              }
            }
          },
          label: {
            //默认文字显示
            show: true,
            position: "top",
            textStyle: {
              fontSize: 14
            },
            formatter: function(params) {
              return params.value + "人";
            }
          },
          data: [230, 420, 326, 636, 337, 684, 803]
        }
      },
      activeName: "first",
      MobileNumber: "",
      UserName: "",
      PapersNumber: "",
      pageIndex: 1,
      dataCount: 0,
      data: [
        {
          type: "成人",
          sex: "女",
          age: "27",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "卢明志",
          papersType: "身份证",
          papersNumber: "330102********647X",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "19",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "唐宏阔",
          papersType: "身份证",
          papersNumber: "	330102********6250",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "5",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "汤华藏",
          papersType: "身份证",
          papersNumber: "330102********6576",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "31",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "石和裕",
          papersType: "身份证",
          papersNumber: "330102********9355",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "36",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "石伟兆",
          papersType: "身份证",
          papersNumber: "	330102********4335",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "白高驰",
          papersType: "身份证",
          papersNumber: "330102********1935",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "林嘉志",
          papersType: "身份证",
          papersNumber: "	330102********0713",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "郝文山",
          papersType: "身份证",
          papersNumber: "	330102********6234",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "金英耀",
          papersType: "身份证",
          papersNumber: "	330102********5696",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "汤光亮",
          papersType: "身份证",
          papersNumber: "	330102********3017",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "郑鸿畴",
          papersType: "身份证",
          papersNumber: "	330102********2874",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "19"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "钱良翰",
          papersType: "身份证",
          papersNumber: "	330102********7456",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ],
      data1: [
        {
          type: "成人",
          sex: "女",
          age: "22",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "谢兴运",
          papersType: "身份证",
          papersNumber: "	330102********8395",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "19",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "熊美寿",
          papersType: "身份证",
          papersNumber: "330102********4917",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "6",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "曾博超",
          papersType: "身份证",
          papersNumber: "	330102********1898",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "女",
          age: "3",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "文良材",
          papersType: "身份证",
          papersNumber: "	330102********0756",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "36",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "史俊逸",
          papersType: "身份证",
          papersNumber: "	330102********9830",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "姚阳德",
          papersType: "身份证",
          papersNumber: "330102********2671",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "姚二",
          papersType: "身份证",
          papersNumber: "330102********3076",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "张欣悦",
          papersType: "身份证",
          papersNumber: "330102********3551",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "党奇玮",
          papersType: "身份证",
          papersNumber: "330102********9494",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "史阳",
          papersType: "身份证",
          papersNumber: "	330102********8870",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "夏兴",
          papersType: "身份证",
          papersNumber: "	330102********0350",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "19"
        },
        {
          type: "成人",
          fatime: "2019.6.28",
          registerName: "超级管理员",
          userName: "李同济",
          papersType: "身份证",
          papersNumber: "	330102********7237",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    pageGo(index) {
      this.pageIndex = index;
      this.getList();
    }
  },
  components: {},
  watch: {},
  props: {},
  computed: {},
  //组件销毁事件
  destroyed() {}
};
</script>
<style lang="" >
.icon-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #fff;
  text-align: center;
  color: #0099cc;
  border-radius: 9990px;
}
h3 {
  color: #0099cc;
}

</style>